<template>
	<div class="login">
		<vue-particles color="#fff" :particleOpacity="0.7" :particlesNumber="80" shapeType="star" :particleSize="4"
		 linesColor="#fff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="2"
		 :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" class="particles">
		</vue-particles>
		<div class="box">
			<div class="boxTop" >
				<img src="../assets/logo2.png" :class="['animated',animate]" style="width:300px;align-self: flex-start;margin-left: 90px;margin-top: 10px;">
				<div class="loginBox" :class="['animated',animate]">
					<div class="title">快步商家管理系统</div>
					<el-form :model="fromData" :rules="rules" ref="fromData" class="form">
						<el-form-item prop="userName">
							<el-input v-model="fromData.userName" placeholder="账号" @keyup.enter.native="submitForm('fromData')">
							</el-input>
						</el-form-item>

						<el-form-item prop="password">
							<el-input :type="color?'password':'text'" v-model="fromData.password" placeholder="密码" clearable
							 @keyup.enter.native="submitForm('fromData')">
								<i class="el-icon-view" :class="color?'color1':'color2'" slot="suffix" style="margin: 11px 8px;" @click="changeColor"></i>
							</el-input>
						</el-form-item>

						<el-form-item>
							<el-button type="primary" @click="submitForm('fromData')" style="width: 100%;background-image:linear-gradient(to right, rgb(85, 165, 211), rgb(3, 95, 162));border:none;margin-top: 25px;">登录</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>

			<el-divider></el-divider>
			<span style="font-size: 14px;"> © 2020-2021 All Rights Reserved. 快步科技管理中心</span>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			var validateusername = (rules, value, callback) => {
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(value))) {
					callback(new Error('手机号输入有误!'));
				}
				callback();
			}
			return {
				animate: 'slideInLeft',
				leftLogo: require('@/assets/bg2.jpg'),
				fromData: {
					userName: '',
					password: '',
				},
				color: true,
				rules: {
					userName: [{
						required: true,
						message: '手机不能为空！',
						trigger: 'blur'
					}, {
						validator: validateusername,
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '密码不能为空！',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		mounted(){
			window.ondblclick= function(){
				return false;
			}
		},
		methods: {
			submitForm(fromData) {
				localStorage.clear();
				this.$refs[fromData].validate((valid) => {
					if (valid) {
						this.$http.post(this.$api.login, {
							'userName': this.fromData.userName,
							'password': this.fromData.password ? this.$md5(this.fromData.password) : "",
						}).then((res) => {
							if (res.code == 0) {
								localStorage.setItem('token',res.data.access_token);
								this.$router.push('/merchantInfo')
							} else if(res.msg == 'Bad credentials'){
								this.$notify.error({
									title: '错误',
									message: '密码输入错误！'
								});
								this.animate = 'shake';
							}else{
								this.$notify.error({
									title: '错误',
									message: res.msg
								});
								this.animate = 'shake';
							}
						})
					} else {
						this.animate = 'shake';
						return false;
					}
				});
			},
			changeColor() {
				this.color = !this.color;
			},
		}
	}
</script>

<style scoped>
	.particles {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.login {
		width: 100%;
		height: 100%;
		background: url('../assets/bg.jpg') no-repeat center center fixed;
		background-size: cover;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box {
		width: 800px;
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}

	.loginBox {
		background-color: rgba(255, 255, 255, .2);
		display: flex;
		flex-direction: column;
		border-radius: 5px;
		align-items: center;
		padding: 15px;
	}

	.boxTop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.boxTop {}

	.title {
		font-size: 16px;
		color: #ffffff;
		text-align: center;
		padding: 15px;
	}

	.form {
		width: 300px;
	}

	.color1 {
		color: #555;
		font-size: 16px;
	}

	.color2 {
		color: rgb(58, 170, 252);
		font-size: 16px;
	}

	/* 	.form>>>.el-input__inner {
		border: none;
		border-bottom: 1px solid #f2f2f2;
		padding: 0;
	}

	ccc .form>>>.el-form-item__label {
		color: red !important;
	} */
</style>
